<template>
 <div id="personal">
   <!-- 封面 -->
   <div class="cover"></div>
   <!-- 个人档 -->
   <!-- <div class="personal">
      <div class="center">
        <div class="right">
          <div class="img">
            <img src="../assets/img/personalMe.webp" alt="">
          </div>
          <div class="me">
            <div class="title">Emily-Summer</div>
            <div class="info-lists">
              <p class="p1">
                <span class="type">性别 ：</span>
                <span class="des">{{personalData.sex}}</span>
              </p>
              <p class="p2">
                <span class="type">血型 ：</span>
                <span class="des">{{personalData.blood}}</span>
              </p>
            </div>
            <div class="info-lists">
              <p class="p1">
                <span class="type">年龄 ：</span>
                <span class="des">{{personalData.age}}</span>
              </p>
              <p class="p2">
                <span class="type">故乡 ：</span>
                <span class="des">{{personalData.home}}</span>
              </p>
            </div>
            <div class="info-lists">
              <p class="p1">
                <span class="type">出生 ：</span>
                <span class="des">{{personalData.birth}}</span>
              </p>
              <p class="p2">
                <span class="type">职业 ：</span>
                <span class="des">{{personalData.occupation}}</span>
              </p>
            </div>
            <div class="info-lists">
              <p class="p1">
                <span class="type">星座 ：</span>
                <span class="des">{{personalData.constellation}}</span>
              </p>
              <p class="p2">
                <span class="type">公司名称 ：</span>
                <span class="des">{{personalData.corporate}}</span>
              </p>
            </div>
            <div class="info-lists">
              <p class="p1">
                <span class="type">现居地 ：</span>
                <span class="des">{{personalData.residence}}</span>
              </p>
              <p class="p2">
                <span class="type">公司所在地 ：</span>
                <span class="des">{{personalData.country}}</span>
              </p>
            </div>
            <div class="info-lists">
              <p class="p1">
                <span class="type">婚姻状况 ：</span>
                <span class="des">{{personalData.marital}}</span>
              </p>
              <p class="p2">
                <span class="type">详细地址 ：</span>
                <span class="des">{{personalData.address}}</span>
              </p>
            </div>
          </div>
        </div>
      </div>
   </div> -->
   <!-- 容器 -->
   <div class="container">
     <!-- More -->
     <!-- <div class="more">
       <div class="title">
         More
       </div>
       <div class="des">
         <div class="boxDes">
           <p>
             <span class="info-type">
               喜欢的颜色 :
             </span>
             <span class="info-des">
               {{personalData.color}}
             </span>
           </p>
           <p>
             <span class="info-type">
               喜欢的数值 :
             </span>
             <span class="info-des">
                {{personalData.num}}
             </span>
           </p>
           <p>
             <span class="info-type">
               喜欢的美食 :
             </span>
             <span class="info-des">
                {{personalData.foods}}
             </span>
           </p>
         </div>
         <div class="boxDes">
           <p>
             <span class="info-type">
               喜欢的明星 :
             </span>
             <span class="info-des">
               {{personalData.star}}
             </span>
           </p>
           <p>
             <span class="info-type">
               喜欢的景点 :
             </span>
             <span class="info-des">
               {{personalData.spot}}
             </span>
           </p>
           <p>
             <span class="info-type">
               喜欢的电影 :
             </span>
             <span class="info-des">
               {{personalData.film}}
             </span>
           </p>
         </div>
         <div class="boxDes">
           <p>
             <span class="info-type">
               喜欢的运动  :
             </span>
             <span class="info-des">
               {{personalData.motion}}
             </span>
           </p>
           <p>
             <span class="info-type">
               喜欢的歌曲 :
             </span>
             <span class="info-des">
               {{personalData.song}}
             </span>
           </p>
           <p>
             <span class="info-type">
               喜欢的动漫 :
             </span>
             <span class="info-des">
               {{personalData.comic}}
             </span>
           </p>
         </div>
         <div class="boxDes">
           <p>
             <span class="info-type">
               喜欢的饮料 :
             </span>
             <span class="info-des">
               {{personalData.drinks}}
             </span>
           </p>
           <p>
             <span class="info-type">
               喜欢的装扮 :
             </span>
             <span class="info-des">
               {{personalData.dress}}
             </span>
           </p>
           <p>
             <span class="info-type">
               喜欢的宠物 :
             </span>
             <span class="info-des">
               {{personalData.pets}}
             </span>
           </p>
         </div>
       </div>
     </div> -->
     <!-- 用户最近游览记录 收藏 -->
     <PersonalVue></PersonalVue>
     <!-- 留言 -->
     <div class="mes">
      <div class="title">发表你的留言 :</div>
      <div class="center">
        <el-form 
          :rules="MessageFromRules" 
          :model="MessageFrom" 
          ref="MessageFrom"
          label-width="50px"
          label-position="left" 
        >
          <div class="from">
            <el-form-item label="姓名:" prop="name" label-width="60px">
              <el-input v-model.trim="MessageFrom.name" ></el-input>
            </el-form-item>
            <el-form-item label="邮箱:" label-width="60px" prop="email">
              <el-input v-model="MessageFrom.email" ></el-input>
            </el-form-item>
            <el-form-item label="电话:" label-width="60px" prop="phone">
              <el-input v-model="MessageFrom.phone"></el-input>
            </el-form-item>
          </div>
          <el-form-item label="内容" prop="message" label-width="60px">
            <el-input type="textarea" placeholder="内容需审核后才会显示" v-model="MessageFrom.message"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm()" class="btn">提交留言</el-button>
          </el-form-item>
        </el-form>
      </div>
     </div>
   </div>

 </div>
</template>
 
<script>
import PersonalVue from "@/components/personal/personal"
export default {
  name: 'Personal',
  components:{
    PersonalVue
  },
  data() {
    return {
      // 留言信息
      MessageFrom: {
        name: "",
        email:"",
        phone:"",
        message:""
      },
      // 留言验证
      MessageFromRules: {
        name: [
          { required: true, trigger: 'blur' },
          { min: 3, max: 6, message: '名字长度在 3 到 6 个字符', trigger: 'change' }
        ],
        email: [
          { required: true, trigger: 'change',type:"email",message:"请输入合法的邮箱地址" }
        ],
        phone: [
          { required: true, trigger: 'blur' },
          { min: 11, max: 11, message: '请输入正确的电话号码', trigger: 'change' }
        ],
        message: [
          { required: true, trigger: 'blur',message:"内容不能为空哦~" },
        ],
      },
      // 个人档信息
      personalData:{}
    }
  },
  methods: {
    // 提交留言
    submitForm() {
      this.$refs.MessageFrom.validate(async v => {
        if (v) {
          let {data} = await this.$axios.post("/client/personal/Guestbook",{
            data:this.MessageFrom
          })
         if(data.code){
           return this.$message.warning(data.mes)
         }
         this.$message.success(data.mes)
         this.$refs.MessageFrom.resetFields()
        } else {
          return false;
        }
      });
    },
    // 获取个人档
    async getPersonal(){
      let {data} = await this.$axios.get("/client/personal/getInfo")
      if(data.code) return this.$message.warning(data.mes)
      this.personalData = data.data
    },
  },
  created(){
    // 获取数据
    this.getPersonal()
  }
  
}
</script>

<style scoped lang='less'>
#personal{
  // 封面图
  .cover{
    width: 100%;
    height: 370px;
    background: url("../assets/img/presonalBg.jpg") no-repeat;
  }
  // 个人档
  .personal{
    width: 100%;
    background-color: #FAFAFA;
    padding: 90px 0 80px;
    .center{
      width: 1200px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      .right{
        width: 1200px;
        height: 392px;
        border-radius: 8px;
        display: flex;
        box-shadow: 3px 0px 10px #e1e1e2;
        .img{
          width: 584px;
          height: 392px;
          img{
            width: 100%;
            height: 100%;
          }
        }
        .me{
          width: 500px;
          height: 292px;
          padding: 50px;
          .title{
            font-size: 20px;
            color: #444444;
            padding-bottom: 30px;
            border-bottom: 1px solid #e2e0e0;
            margin-bottom: 30px;
          } 
          .info-lists{
            display: flex;
            justify-content: space-between;
            p{
              width: 190px;
              height: 40px;
              line-height: 40px;
              font-size: 14px;
              color: #777777;
              &.p2{
                width: 294px;
                .type{
                  margin-right: 30px;
                }
              }
              .type{
                margin-right: 25px;
              }
            }
          }
        }
      }
    }
  }
  // 容器
  .container{
    width: 100%;
    background: url("../assets/img/home02.jpg");
    padding-top: 70px;
    .more{
      width: 1060px;
      margin: 0 auto;
      padding: 50px 70px;
      box-shadow: 0px 0px 10px #d4d4d4;
      background-color: #fff;
      .title{
        font-size: 20px;
        color: #444444;
        width: 100%;
        height: 62px;
        box-sizing: border-box;
        border-bottom: 1px solid #dddddd;
      }
      .des{
        width: 100%;
        display: flex;
        justify-content: space-between;
        margin-top: 40px;
        .boxDes{
          width: 244px;
          height: 122px;
          font-size: 14px;
          color: #777777;
          p{
            margin-bottom: 27px;
            .info-type{
              margin-right: 30px;
            }
          }
        }
      }
    }
    .mes{
      width: 1200px;
      // height: 300px;
      // background-color: red;
      margin:70px auto 0;
      padding:50px 0px 0;
      box-sizing: border-box;
      border-top: 1px solid #dddcdc;
      .title{
        text-indent: 2em;
        font-size: 14px;
        color: #666666;
      }
      .center{
        width: 1100px;
        padding: 0 50px 0;
        font-size: 14px;
        color: #666666;
        margin-top: 30px;
        .el-form{
          .from{
            display: flex;
            justify-content:space-between;
            .el-form-item{
              .el-form-item__content{
                .el-input{
                  width: 246px;
                  height: 34px;
                }
              }
            }
          }
          .btn{
            background-color: #FFC001;
            border: none;
          }
        }
      }
    }
  }
}
</style>